import {Component, Directive, Input} from '@angular/core';

@Directive({selector: 'more'})
export class MoreDirective {
}

@Component({
  selector: 'gn-buttons',
  template: `
    <div id="buttons">
      <ng-content></ng-content>
    </div>
    <ng-container *ngIf="showMore">
      <button pButton id="more-button" type="button" class="ui-button-raised ui-button-secondary"
              [icon]="expanded?expandedIcon:collapsedIcon"
              (click)="this.expanded = !this.expanded"></button>
    </ng-container>
    <div *ngIf="expanded" id="more-content">
      <ng-content select="more"></ng-content>
    </div>
  `
})
export class ButtonsComponent {

  expandedIcon = 'pi pi-angle-up';
  collapsedIcon = 'pi pi-ellipsis-h';
  expanded = false;

  @Input() showMore = false;

}
